<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<script src="../resource/jshow/js/jshow.utils.js"></script>
<input type="hidden" name="proInfoId" id="proInfoId" value="<s:property value="proInfoId" />"/>

<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <div class="jarviswidget ">
            <header>
                <span class="widget-icon"> <i class="fa fa-calendar"></i> </span>
                <h2 class="dateTitle"> 工作日历 </h2>
                <div class="widget-toolbar dateFormatBtn">
                    <div class="btn-group" id="ajax-group-button">
                        <a id="ajax-map-phone" type="1" class="btn btn-default btn-xs txt-color-white bg-color-greenLight" href="javascript:void(0);" > 正常 </a>
                        <a id="ajax-comments-o" type="2" class="btn btn-default btn-xs txt-color-white bg-color-orange " href="javascript:void(0);" > 迟到 </a>
                        <a id="ajax-map-leave" type="3" class="btn btn-default btn-xs txt-color-white bg-color-red " href="javascript:void(0);" > 请假</a>
                    </div>
                    <!-- add: non-hidden - to disable auto hide -->
                    <div class="btn-group">
                        <button class="dateBtnDefault dropdown-toggle btn-xs btn-default" data-toggle="dropdown">
                            日历显示范围 <i class="fa fa-caret-down"></i>
                        </button>
                        <ul class="dropdown-menu js-status-update pull-right">
                            <li>
                                <a href="javascript:void(0);" id="mt">月</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" id="ag">周</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" id="td">日</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </header>
            <!-- widget div-->
            <div>
                <div class="widget-body no-padding">
                    <!-- content goes here -->
                    <div class="widget-body-toolbar">
                        <div id="calendar-buttons">
                            <div class="btn-group" style="width: 48px;">
                                <a href="javascript:void(0)" class="dateBtnDefault btn-default btn-xs" id="btn-prev"><i class="fa fa-chevron-left"></i></a>
                                <a href="javascript:void(0)" class="dateBtnDefault btn-default btn-xs" id="btn-next"><i class="fa fa-chevron-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div id="calendar"></div>
                    <!-- end content -->
                </div>
            </div>
            <!-- end widget div -->
        </div>
        <!-- end widget -->
    </div>
    <!-- end row -->
</div>

<script type="text/javascript">
	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();
	loadScript("../resource/com/js/plugin/fullcalendar/jquery.fullcalendar.min.js", lazyload);
    function lazyload(){
        setTimeout(iniCalendar,200);
    }
    //日历
    function iniCalendar() {
        //"use strict";
        $("#hasInital").val("y");

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        var hdr = {
            left: 'title',
            center: 'month,agendaWeek,agendaDay',
            right: 'prev,today,next'
        };

        var initDrag = function (e) {
            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            // it doesn't need to have a start or end

            var eventObject = {
                title: $.trim(e.children().text()), // use the element's text as the event title
                description: $.trim(e.children('span').attr('data-description')),
                icon: $.trim(e.children('span').attr('data-icon')),
                className: $.trim(e.children('span').attr('class')) // use the element's children as the event class
            };
            // store the Event Object in the DOM element so we can get to it later
            e.data('eventObject', eventObject);

            // make the event draggable using jQuery UI
            e.draggable({
                zIndex: 999,
                revert: true, // will cause the event to go back to its
                revertDuration: 0 //  original position after the drag
            });
        };

        var addEvent = function (title, priority, description, icon) {
            title = title.length === 0 ? "Untitled Event" : title;
            description = description.length === 0 ? "No Description" : description;
            icon = icon.length === 0 ? " " : icon;
            priority = priority.length === 0 ? "label label-default" : priority;

            var html = $('<li><span class="' + priority + '" data-description="' + description + '" data-icon="' +
            icon + '">' + title + '</span></li>').prependTo('ul#external-events').hide().fadeIn();

            $("#event-container").effect("highlight", 800);

            initDrag(html);
        };

        /* initialize the external events
         -----------------------------------------------------------------*/
        $('#external-events > li').each(function () {
            initDrag($(this));
        });

        $('#add-event').click(function () {
            var title = $('#title').val(),
                    priority = $('input:radio[name=priority]:checked').val(),
                    description = $('#description').val(),
                    icon = $('input:radio[name=iconselect]:checked').val();

            addEvent(title, priority, description, icon);
        });

        /* initialize the calendar
         -----------------------------------------------------------------*/
        $('#calendar').fullCalendar({
            header: hdr,
            // display
            defaultView: 'month',
            aspectRatio: 1.35,
            weekends: true,

            allDayDefault: true,
            ignoreTimezone: true,

            // event ajax
            lazyFetching: true,
            startParam: 'start',
            endParam: 'end',

            // time formats
            titleFormat: {
                month: 'MMMM yyyy',
                week: "MMM d[ yyyy]{ '&#8212;'[ MMM] d yyyy}",
                day: 'dddd, MMM d, yyyy'
            },
            columnFormat: {
                month: 'ddd',
                week: 'ddd M/d',
                day: 'dddd M/d'
            },
            timeFormat: { // for event elements
                '': 'h(:mm)t' // default
            },

            // locale
            isRTL: false,
            firstDay: 0,
            monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
            dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
            buttonText: {
                prev: '&nbsp;&#9668;&nbsp;',
                next: '&nbsp;&#9658;&nbsp;',
                prevYear: '&nbsp;&lt;&lt;&nbsp;',
                nextYear: '&nbsp;&gt;&gt;&nbsp;',
                today: '今天',
                month: '一月',
                week: '一周',
                day: '一天',
                create:'新建日程'
            },
            // jquery-ui theming
            theme: false,
            //selectable: false,
            unselectAuto: true,
            dropAccept: '*',
            //-------------------------------------
            editable: false,
            droppable: false, // this allows things to be dropped onto the calendar !!!
            drop: function (date, allDay) { // this function is called when something is dropped
                return ;
                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');

                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);

                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;

                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }

            },
            select: function (start, end, allDay) {

                var title = prompt('Event Title:');
                if (title) {
                    calendar.fullCalendar('renderEvent', {
                                title: title,
                                start: start,
                                end: end,
                                allDay: allDay
                            }, true // make the event "stick"
                    );
                }
                calendar.fullCalendar('unselect');
            },
            eventClick: function(calEvent, jsEvent, view) {
                loadTaskInfo(calEvent);
                // change the border color just for fun
                $(this).css('border-color', 'red');

            },
            events:function(start,end,callback){
                var url ="ajax-calendar!taskData.action";
                var data= {
                    start: start.getTime(),
                    end: end.getTime(),
                    proInfoId:$("#s3 #proInfoId").val(),
                    type:""
                }
                $.ajax({
                    url : url,
                    method:"post",
                    cache : false,
                    dataType : "json",
                    data : data,
                    success : function(data) {
                        callback(data);
                    }
                });

            },
            eventRender: function (event, element, icon) {
                if (!event.description == "") {
                    element.find('.fc-event-title').append("<br/><span class='ultra-light'>" + event.description +
                    "</span>");
                }
                if (!event.icon == "") {
                    element.find('.fc-event-title').append("<i class='air air-top-right fa " + event.icon +
                    " '></i>");
                }
            },
            windowResize: function (event, ui) {
                $('#calendar').fullCalendar('render');
            }
        });

        /* hide default buttons */
        $('.fc-header-right, .fc-header-center').hide();
    }


    $('#calendar-buttons #btn-prev').click(function () {
        $('.fc-button-prev').click();
        return false;
    });

    $('#calendar-buttons #btn-next').click(function () {
        $('.fc-button-next').click();
        return false;
    });

    $('#calendar-buttons #btn-today').click(function () {
        $('.fc-button-today').click();
        return false;
    });

    $('#mt').click(function () {
        $('#calendar').fullCalendar('changeView', 'month');
    });

    $('#ag').click(function () {
        $('#calendar').fullCalendar('changeView', 'basicWeek');
    });

    $('#td').click(function () {
        $('#calendar').fullCalendar('changeView', 'basicDay');
    });
    function loadTaskInfo(event) {
        var url=event.linkUrl;
        gDialog.fCreate({
            title:'签到记录',
            url:url,
            width:500
        }).show();
    };





</script>
